<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Dashboard Template for Bootstrap</title>
		<!-- 导入公共的样式 -->
		<section th:replace="~{common/css :: #cssSection}"></section>

	</head>

	<body>
	    <!-- 导入公共的顶部导航条 -->
		<div th:replace="~{common/navigation :: topNav}"></div>

		<div class="container-fluid">
			<div class="row">
				<!-- 导入公共的左侧导航条 -->
				<div th:replace="~{common/navigation :: leftNav(menuName='empList')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2><a class="btn btn-sm btn-success" href="#" th:href="@{/manage/emp}">员工添加</a> </h2>

					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>员工编号</th>
									<th>员工姓名</th>
									<th>邮箱</th>
									<th>性别</th>
									<th>出生日期</th>
									<th>部门编号</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="emp : ${pageInfo.list}">
									<td th:text="${emp.id}">1,001</td>
									<td th:text="${emp.empName}">Lorem</td>
									<td th:text="${emp.email}">ipsum</td>
									<td th:text="${emp.gender} == 1 ? '男' : '女'">dolor</td>
									<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd')}">sit</td>
									<td th:text="${emp.deptName}">sit</td>

									<td>
										<a class="btn btn-sm btn-primary" th:href="@{'/manage/emp/'+${emp.id}}">编辑</a>
										<button class="btn btn-sm btn-danger deleteBtn" th:attr="emp_id=${emp.id}">删除</button>
									</td>
								</tr>
							    <tr>
									<td colspan="7" align="center">
										<span th:text="${pageInfo.pageNum}"></span> / <span th:text="${pageInfo.pages}"></span>
                                        <a th:href="@{/manage/showList(pageId=1)}" th:if="not ${pageInfo.isFirstPage}">首页</a>
										<a th:href="@{/manage/showList(pageId=${pageInfo.prePage})}" th:if="${pageInfo.hasPreviousPage}">上一页</a>
										<a th:href="@{/manage/showList(pageId=${pageInfo.nextPage})}" th:if="${pageInfo.hasNextPage}">下一页</a>
										<a th:href="@{/manage/showList(pageId=${pageInfo.pages})}" th:if="not ${pageInfo.isLastPage}">尾页</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="asserts/js/jquery-1.12.4.min.js" th:src="@{/asserts/js/jquery-1.12.4.min.js}"></script>
		<script type="text/javascript">
           $(function(){
           	  $(".deleteBtn").click(function(){
           	  	  if(window.confirm("您确认要删除吗？")){
					  var empId = $(this).attr("emp_id");
					  $.ajax({type:"delete",
                              url: "[[@{/manage/emp/}]]"+empId,
						      dataType: "json",
						      success: function (data) {
								  if(data.success){
								  	 alert("删除成功！");
								  	 window.location.href="[[@{/manage/emps}]]";
								  }else{
									 alert("删除失败！");
								  }
							  }
					         });
				  }
			  });
		   })
		</script>
		<!-- 导入公共的js -->
		<div th:replace="~{common/js :: #jsSection}"></div>

	</body>

</html>